#view.view-details {

    .view-details-sized(@size) {

        .item {
            .label, .date, .size {
                line-height: @size + 14px;
            }
        }

        .square {
            width: @size;
            height: @size;

            img {
                width: @size;
                height: @size;
            }
        }

        .label {
            margin: 0 246px 0 (@size + 32px);
        }
    }

    margin: 32px;

    .header {
        position: relative;
        white-space: nowrap;
        display: list-item;
        border-bottom: 1px solid rgba(0,0,0,0.07);
        border-radius: 2px 2px 0 0;

        .label, .date, .size {
            .eased-transition;
            line-height: 24px;
            padding: 0px 8px 16px 8px;
            opacity: 0.4;
            outline: 0;

            &:hover {
                opacity: 1;
                color: @col-text-hover;
            }
        }

        .sort {
            display: none;
            position: relative;
            top: -2px;
            width: 20px;
            height: 20px;
            padding: 0 4px;
        }

        .ascending .sort {
            display: inline;
        }

        .descending .sort {
            display: inline;
            transform: rotate(180deg);
            zoom: 1;
        }
    }

    .item {
        overflow: hidden;
        border-bottom: 1px solid rgba(0,0,0,0.07);

        &:hover {
            .raised;
            z-index: 1;
        }

        &:last-child {
            border-radius: 0 0 2px 2px;
        }
    }

    .square {
        display: inline-block;
        position: absolute;
        left: 16px;
        top: -1px;
        padding: 8px;

        .thumb {
            .rounded;
            box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
        }
    }

    .label, .date, .size {
        padding: 0 8px;
    }

    .date {
        position: absolute;
        right: 116px;
        top: 0;
    }

    .size {
        position: absolute;
        right: 16px;
        top: 0;
    }

    .view-details-sized(16px)
}

#view.view-details {
    &.width-0 {
        .label {
            margin-right: 4px;
        }
        .date {
            display: none;
        }
        .size {
            display: none;
        }
    }

    &.width-1 {
        .label {
            margin-right: 64px;
        }
        .date {
            display: none;
        }
    }
}
